import React from "react"
import './css/Head.css'
import './css/Content.css'
class Content extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: [
                {
                    text: '耳饰',
                    imgPath: 'img/classification_image.png'
                },
                {
                    text: '戒指',
                    imgPath: 'img/classification_image.png'
                },
                {
                    text: '手链',
                    imgPath: 'img/classification_image.png'
                },
                {
                    text: '项链',
                    imgPath: 'img/classification_image.png'
                },
                {
                    text: '吊坠',
                    imgPath: 'img/classification_image.png'
                },
                {
                    text: '发饰',
                    imgPath: 'img/classification_image.png'
                },
            ]
        }
    }
    render() {
        return (
            <div className="content">
                <img className="bannerImg" src="img/classification_banner.png" alt="" srcset="" />
                <ul className="contentList">
                    {
                        this.state.dataList.map((item, idx) => {
                            return (
                                <li className="contentLi">
                                    <img src={item.imgPath} alt="" srcset="" />
                                    <p>{item.text}</p>
                                </li>
                            )
                        })
                    }
                </ul>
                <h3 className="title">时尚</h3>
                <ul className="contentList contentList2">
                    {
                        this.state.dataList.map((item, idx) => {
                            return (
                                <li className="contentLi">
                                    <img src={item.imgPath} alt="" srcset="" />
                                    <p>{item.text}</p>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default Content;